<template>
    <p style="line-height: 3.125rem; font-size: 1rem; font-weight: bold" class="main_text">定价列表</p>
    <div class="main">
        <!-- #################################### 表单 #################################### -->
        <div class="content p20">
            <el-table border :data="tableData" style="width: 100%" :header-cell-style="{ background: '#f0f6fe' }"
                max-height="440">
                <el-table-column label="识别类型" prop="type" />
                <el-table-column label="单价" prop="price">
                    <template #default="props">
                        <el-text v-if="props.row.flag == false">{{ props.row.price }}&nbsp;元/次</el-text>
                        <div v-else>
                            <el-input v-model="props.row.price" :placeholder="props.row.price" size="small"
                                style="width: 50%;" />&nbsp;元/次
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right">
                    <template #default="props">
                        <el-button v-if="props.row.flag == false" size="small" link type="primary"
                            @click="props.row.flag = true">修改</el-button>
                        <el-button v-if="props.row.flag == true" size="small" link type="success"
                            @click="saveBtn(props.row)">保存</el-button>
                        <el-button v-if="props.row.flag == true" size="small" link type="danger"
                            @click="props.row.flag = false">取消</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- #################################### 分页 #################################### -->
        </div>
    </div>
</template>

<script setup lang="ts">
import { RequestRecognizeLeftGetAllRecognizeFee, RequestRecognizeLeftSetRecognizeFee } from '@/api/path/index.js'
import { ElMessage } from 'element-plus'
import { CollectionTag, Edit } from '@element-plus/icons-vue'
import { ref } from 'vue'
/* 表格 */
const tableData = ref<any>([
    {
        id: 1,
        type: '行驶证正页识别',
        price: '',
        flag: false
    },
    {
        id: 2,
        type: '行驶证反页识别',
        price: '',
        flag: false
    },
    {
        id: 3,
        type: '行驶证正反页识别',
        price: '',
        flag: false
    },
])
/* ************************ 分页获取数据 ************************ */
const getData = () => {
    RequestRecognizeLeftGetAllRecognizeFee().then((res: any) => {
        tableData.value.forEach((item: any) => {
            if (item.type == '行驶证正页识别') {
                item.price = res.resultObj.正面识别
            }
            if (item.type == '行驶证反页识别') {
                item.price = res.resultObj.反面识别
            }
            if (item.type == '行驶证正反页识别') {
                item.price = res.resultObj.正反面识别
            }
        });
        console.log('tableData', tableData.value);
    })
}
getData()
const saveBtn = (row: any) => {
    let info = new FormData()
    info.append('price', row.price)
    info.append('type', row.id)
    RequestRecognizeLeftSetRecognizeFee(info).then((res: any) => {
        if (res.success == true) {
            ElMessage.success(res.resultObj)
            tableData.value.forEach((item: any) => {
                item.flag = false
            });
            getData()
        } else {
            ElMessage.success(res.msg)
        }
    })
}
</script>









<style scoped lang="scss">
.main {
    width: 100%;

    .top {
        width: 100%;
        background-color: #fff;
    }

    .content {
        width: 100%;
        background-color: #fff;
    }
}

/* 弹出框样式 */
::v-deep .el-overlay {
    .el-dialog__header {
        background-color: #116cf8;
        margin-right: 0;
    }

    .el-dialog__title {
        color: #fff;
    }

    .el-icon svg {
        color: #fff;
    }
}
</style>
